﻿
@model IEnumerable<SystemContainer.Models.City>

@{
    ViewBag.Title = "User AoI Recommendation";
    
}
<p>Please select a city</p> 
<div id="LocationArea">

<select id="cities">
     @foreach (var city in Model){
<option value="@city.CityID">@city.locationName</option>
     }
</select>


<input type="submit" value="Submit" onclick="getCity()">
</div>
<br />





<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>


<script type="text/javascript">
    var map;
    var geocoder;
    var isSpecific=false;

    var markerArray = new Array();

    $.ajaxSetup({
        async: false
    });

    function initialize(location) {
        geocoder = new google.maps.Geocoder();
        var center = new google.maps.LatLng(location.Latitude, location.Longtitude);
        //  var zoom = 0;
        result = null;
        bounds = new google.maps.LatLngBounds();

        infowindow = new google.maps.InfoWindow({
            content: null
        });


        var mapProp = {
            center: center,
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

     
        google.maps.event.addListener(map, 'zoom_changed', function () {
            if (isSpecific == false) {
            //    alert("zoom");
                clearMarker();
                showAOIByBounds(location);
            }
        });
        google.maps.event.addListener(map, 'dragend', function () {
            // 3 seconds after the center of the map has changed, pan back to the
            // marker.
          
                if (isSpecific == false) {
            //        alert("move");
                    clearMarker();
                showAOIByBounds(location);
            }
          
           
          
        });
        showAllAreaOfInterest(location.CityID);
       


    }
    function showAOIByBounds(location) {
       
        var bound = map.getBounds();
        var nebound = bound.getNorthEast();
        var swbound = bound.getSouthWest();
        var nelat = nebound.lat();
        var nelng = nebound.lng();
        var swlat = swbound.lat();
        var swlng = swbound.lng();
     //   alert("AreaOfInterest" + nelat+location.CityID);
        showAreaOfInterest(location.CityID, nelat, nelng, swlat, swlng);
    }

    function showAllAreaOfInterest(cityID) {
      //  alert("All AOI");
        isSpecific = false;
    
        $.post("/AreaOfInterestRecommendation/ShowAllAreaOfInterest", { "cityID": cityID}, function (AOIList) {
            //  getBestImage(AOIList);
            for (var i = 0; i < AOIList.length; i++) {
                placeAOIMarker(AOIList[i], i);
            }
        });
    }
    function showAreaOfInterest(cityID,nelat,nelng,swlat,swlng) {
       // alert("Part AOI");
        $.post("/AreaOfInterestRecommendation/ShowAreaOfInterest", { "cityID": cityID ,"nelat":nelat,"nelng":nelng,"swlat":swlat,"swlng":swlng}, function (AOIList) {
            //  getBestImage(AOIList);
            for (var i = 0; i < AOIList.length; i++) {
                placeAOIMarker(AOIList[i], i);
            }
        });
    }
    function getVenueDetail(venueID) {

        $.post("/AreaOfInterestRecommendation/ShowVenueDetail", {
            "venueID": venueID
        },
                          function (response) {


                              result = response.locationName;
                              infowindow.setContent(result);




                          });
    }
    
    function placeAOIMarker(location, index) {
        
        var letter = String.fromCharCode("A".charCodeAt(0) + index);
        // image = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
        image = "http://www.google.com.au/mapfiles/marker" + letter + ".png";

        var AOIID = location.AreaOfInterestID;

        var latlng = new google.maps.LatLng(location.Latitude, location.Longtitude);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: image
        });
        markerArray[index] = marker;
        //    alert(markerArray[index].position);
        google.maps.event.addListener(marker, 'click', function () {
            isSpecific = true;
            map.setCenter(marker.getPosition());

            map.setZoom(15);
            showAOIVenue(AOIID,location.CityID);
            showAOIScenicLocations(AOIID,location.CityID);
            clearMarker();

        });


    }
    function getScenicLocationDetail(slID,cityID) {
        //wt edit
        //var cityID = document.getElementById("cities").options[document.getElementById("cities").selectedIndex].value;
     //   alert("ScenicLocation");
        $.post("/AreaOfInterestRecommendation/ShowScenicLocationDetail", {
            "slID": slID, "cityID": cityID// wtedit
        },
                          function (response) {
                              if (response.type==3) {
                                  geocodeLatLng(response);
                              }
                              result = response.locationName;
                              infowindow.setContent(result);
                          });
    }
    function geocodeLatLng(location) {

        var latlng = new google.maps.LatLng(location.Latitude, location.Longtitude);
        var src = location.picUrl;
        var imgsrc = "<img src='"+src+"'height='200' width='270'>";
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {

                    result = results[0].formatted_address + "<br>" +imgsrc;
                    infowindow.setContent(result);


                } else {
                  alert('No results found');
                  result = "not found" + "<br>" + imgsrc;
                    infowindow.setContent(result);

                }
            } else {
              alert('Geocoder failed due to: ' + status);
              result = "not found" + "<br>" +imgsrc;
                infowindow.setContent(result);

            }
        });


    }
    function clearMarker() {
        for (i = 0; i < markerArray.length; i++) {
            markerArray[i].setMap(null);
        }
    }

    function placeVenueMarker(location) {
        var image = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";


        var latlng = new google.maps.LatLng(location.Latitude, location.Longtitude);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: image

        });


        google.maps.event.addListener(marker, 'click', function () {
          
            getVenueDetail(location.VenueID);
            infowindow.open(map, marker);
        });


    }
    function placeScenicLocationMarker(location) {
        var image = location.picUrl;
        var imageIcon = new google.maps.MarkerImage(image, new google.maps.Size(32, 32), null, null, new google.maps.Size(32, 32));  //location.picUrl
      // alert(location.picUrl);
     

        var latlng = new google.maps.LatLng(location.Latitude, location.Longtitude);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: imageIcon

        });


        google.maps.event.addListener(marker, 'click', function () {
          
            getScenicLocationDetail(location.ScenicLocationID,location.CityID);
            infowindow.open(map, marker);
        });


    }

    //  google.maps.event.addDomListener(window, 'load', initialize);
</script>


<script type="text/javascript">
    function getCity() {
        isSpecific = false;
        var cityID = document.getElementById("cities").options[document.getElementById("cities").selectedIndex].value;

        $.post("/AreaOfInterestRecommendation/BrowseLocation", { "cityID": cityID },
                          function (response) {

                              initialize(response);

                          });
    }

    function showAOIVenue(AOIID,cityID) {


        $.post("/AreaOfInterestRecommendation/ShowAOIVenue", { "AOIID": AOIID ,"cityID":cityID},
                          function (hotLocationList) {

                              for (var i = 0; i < hotLocationList.length; i++) {
                                  placeVenueMarker(hotLocationList[i]);
                              }
                          });
    }
    function showAOIScenicLocations(AOIID,cityID) {


        $.post("/AreaOfInterestRecommendation/ShowAOIScenicLocation", { "AOIID": AOIID,"cityID":cityID },
                          function (hotLocationList) {

                              for (var i = 0; i < hotLocationList.length; i++) {
                                  placeScenicLocationMarker(hotLocationList[i]);
                              }
                          });
    }



</script>



<div id="googleMap" style="width:1000px;height:650px;"></div>







